<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width">
		<link rel="stylesheet" type="text/css" href="css/reset.css"/>
	    <link rel="stylesheet" type="text/css" href="css/SYtuichu.css"/>
	    <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
	    <link rel="stylesheet" type="text/css" href="css/swiper.min.css"/>
	    <script src="flexible/flexible.debug.js"></script>
	   
	</head>
	<body>
			 <!--头部-->
		<div class="header">
			<div class="left">
				<span class="weixin"><img src="img/images/weixin.png"/></span>
			</div>
			<div class="center">
				<p>echo</p>
			</div>
			<div class="right">
				<span class="sousuo"><img src="img/images/sousuo.png"/></span>
				<span class="quan"><img src="img/images/quan.png" class="youtu"/></span>
			</div>
		</div>
		<!--导航-->
		<div class="hang">
			<ul>
				<li class="dianji">
					<a href="#">
					  <img src="img/images/comments.png"/>
					  <span>首页推存</span>
					</a>					
				</li>
				<li>
					<a href="#">
					  <img src="img/images/compass.png"/>
					  <span class="changjing">场景</span>
					</a>					
				</li>
				<li>
					<a href="#">
					  <img src="img/images/favorite.png"/>
					  <span class="liupai">流派</span>
					</a>					
				</li>
				<li>
					<a href="#">
					  <img src="img/images/iconfont-mingpian.png"/>
					  <span class="yu">语言</span>
					</a>					
				</li>
			</ul>				
		</div>
		 <!--mv视频-->
		<div class="tupian">
			<dl>
				<dt><img src="img/images/da1.png"/></dt>
				<dd>壮我大电子  前凑伊征服我</dd>
				<dd>Alive（Original Mix）</dd>
				<dd class="yan">纯粹电子乐<span>频道</span></dd>
			</dl>
			<dl>
				<dt><img src="img/images/da2.png"/></dt>
				<dd>就爱这味</dd>
				<dd>That s W ha</dd>
				<dd class="yan">欧美流行指南<span>频道</span></dd>
			</dl>
            <dl>
				<dt><img src="img/images/da3.png"/></dt>
				<dd>失眠必听  慵懒性感女生</dd>
				<dd>Alive（Original Mix）</dd>
				<dd class="yan">纯粹电子乐<span>频道</span></dd>
			</dl>
            <dl>
				<dt><img src="img/images/da4.png"/></dt>
				<dd>壮我大电子  前凑伊征服我</dd>
				<dd>Alive（Original Mix）</dd>
				<dd class="yan">纯粹电子乐<span>频道</span></dd>
			</dl>
            <dl>
				<dt><img src="img/images/da5.png"/></dt>
				<dd>壮我大电子  前凑伊征服我</dd>
				<dd>Alive（Original Mix）</dd>
				<dd class="yan">纯粹电子乐<span>频道</span></dd>
			</dl>
            <dl>
				<dt><img src="img/images/da6.png"/></dt>
				<dd>壮我大电子  前凑伊征服我</dd>
				<dd>Alive（Original Mix）</dd>
				<dd class="yan">纯粹电子乐<span>频道</span></dd>
			</dl>
            <dl>
				<dt><img src="img/images/da1.png"/></dt>
				<dd>壮我大电子  前凑伊征服我</dd>
				<dd>Alive（Original Mix）</dd>
				<dd class="yan">纯粹电子乐<span>频道</span></dd>
			</dl>
            <dl>
				<dt><img src="img/images/da2.png"/></dt>
				<dd>壮我大电子  前凑伊征服我</dd>
				<dd>Alive（Original Mix）</dd>
				<dd class="yan">纯粹电子乐<span>频道</span></dd>
			</dl>
		</div>
		 <!--尾部-->
		<div class="tail">
		  	<ul>
		  		<li><a href="sytuichu.html"><img src="img/images/首页.png"/></a></li>
		  		<li><a href="liupai.html"><img src="img/images/Category.png"/></a></li>
		  		<li><a href="index.html"><img src="img/images/add.png"></a></li>
		  		<li><a href="haoyouquan.html"><img src="img/images/atm-away.png"></a></li>
		  		<li><a href="wode.html"><img src="img/images/account.png"></a></li>
		  	</ul>
	    </div>
		<!--导航--流派-->
		<div class="xiala">
			<ul>
				<li>流行</li>
				<li>民谣</li>	
				<li>摇滚</li>
				<li>电子</li>
				<li>嘻哈</li>
				<li>爵士蓝调</li>	
				<li>古典</li>
				<li>轻音乐</li>
				<li>民乐古风</li>
				<li>二次元</li>	
				<li>世界音乐</li>
				<li>其他</li>
			</ul>
			<p class="shouqi">^ 收起</p>
		</div>
		<!--导航--场景-->
		<div class="jing">
			<ul>
				<li>工作</li>
				<li>阅读</li>	
				<li>运动</li>
				<li>开车</li>
				<li>PARTY</li>
				<li>趣味搞笑</li>	
				<li>深夜</li>
				<li>旅行</li>
				<li>情感</li>
				<li>3D奇幻听觉</li>	
				<li>放松咖啡馆</li>
				<li>校园</li>
			</ul>
			<p class="shouqi">^ 收起</p>
		</div>
		<!--导航--语言-->
		<div class="yuyan">
			<ul>
				<li>英语</li>
				<li>国语</li>	
				<li>日语</li>
				<li>粤语</li>
				<li>韩语</li>
				<li>小语种</li>					
			</ul>
			<p class="shouqi">^ 收起</p>
		</div>
		
		
		
		
		
		
		<script src="js/jquery-3.2.1.js"></script>
		
		<script>
//			流派
			$(function(){
				$('.liupai').click(function(){
					$('.xiala').show();
				})
				$('.shouqi').click(function(){
					$('.xiala').hide();
				})		
//			场景
				$('.changjing').click(function(){
					$('.jing').show();
				})
				$('.shouqi').click(function(){
					$('.jing').hide();
				})			
//			语言			
				$('.yu').click(function(){
					$('.yuyan').show();
				})
				$('.shouqi').click(function(){
					$('.yuyan').hide();
				})
				
				$('.hang ul li').click(function(){
					$('.dianji').removeClass('dianji');
				})
			})
			
			
		</script>
	</body>
</html>
